<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button"
				activeColor="#4cd964"></uni-segmented-control>

		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key=item.id>
				<view class="pic">
					<!-- lazy-load是仅仅支持微信小程序,H5中不生效,可以减少内存占用 -->
					<image :src="item.url" mode="widthFix" @click="onPreview(index)" lazy-load></image>
					<text class="text" selectable>{{item.id}},{{item.width}}*{{item.height}}</text>

				</view>

			</view>

		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<!-- 使用uni-icons -->
				<uni-icons type="refreshempty" size="30" color="#888"></uni-icons>

			</view>
			<view class="item" @click="goTop">
				<uni-icons type="arrow-up" size="30" color="#888"></uni-icons>

			</view>

		</view>
		<view class="more">
			<!-- <button @click="network">加载更多</button> -->
			<uni-load-more status="loading"></uni-load-more>
		</view>


	</view>
	<view class="footer">

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pets: [],
				current: 0,
				classify: [{
					key: 'all',
					value: '全部'
				}, {
					key: 'dog',
					value: '狗狗'
				}, {
					key: 'cat',
					value: '猫猫'
				}]

			}
		},
		methods: {

			// 发送网络请求
			network() {
				uni.showLoading()
				// uni.startPullDownRefresh()
				uni.request({
					url: 'https://api.thecatapi.com/v1/images/search',
					data: {
						limit: 10
					}
				}).then(res => {
					// console.log(res)
					this.pets.push(...res.data)

				}).catch(err => {
					console.log(err)
				}).finally(() => {
					uni.hideLoading()
					// 关闭下拉刷新转圈圈
					uni.stopPullDownRefresh();
				})
			},
			// 点击预览
			onPreview(index) {
				// console.log(index)
				let urls = this.pets.map(res => {
					return res.url
				})
				// console.log(urls)
				// 预览图片,仅仅支持APP和微信小程序
				uni.previewImage({
					// 必填参数:current和urls
					current: index,
					urls: urls

				})

			},
			// 点击刷新
			onRefresh() {
				// uni.startPullDownRefresh()
				this.pets = []
				this.network()
			},
			goTop() {
				// 回到顶部
				uni.pageScrollTo({
					// 回到顶部的位置
					scrollTop: 0,
					// 持续时间,默认300,单位毫秒
					duration: 100
				})


			},
			onClickItem(e) {
				console.log(e)
				this.pets = []
				this.network()
			}

		},
		onLoad() {
			this.network()
		},
		// 触底加载
		onReachBottom() {
			this.network()

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pets = []
			this.network()
			uni.stopPullDownRefresh()
		},
		computed: {
			values: function() {
				return this.classify.map(item => item.value)
			}

		}

	}
</script>

<style lang="scss" scoped>
	.container {
		.menu {
			padding: 50rpx 50rpx 0;
		}

		.layout {
			padding: 50rpx;

			.box {
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, .08);
				border-radius: 30rpx;
				overflow: hidden;

				.pic {
					image {
						width: 100%;
					}
				}

				.text {
					padding: 30rpx;
				}


			}

		}

		.float {
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;

			.item {
				width: 90rpx;
				height: 90rpx;
				background-color: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 1px solid black;

			}

		}


		.more {
			// calc用于计算,注意符号两边必须带有一个空格
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}

	}

	.footer {
		width: 100%;
		// 安全区域,一般不允许设置,h5中不允许
		height: env(safe-area-inset-bottom);

		background-color: rgba(255, 0, 0, 0.3)
	}
</style>